<template>
    <div class='video-playy'>
        <header class="header">
            <van-nav-bar title="最近播放" left-arrow :border="false" fixed @click-left="handler" :style="{ color: '#fff' }">
                <template #right>
                </template>
            </van-nav-bar>
        </header>
        <video :src="mvData.url" class="myVideo" autoplay controls></video>
    </div>
</template>

<script>
import { getMvUrl } from "@/api/index"
import { mapActions } from "vuex"
export default {
    name: 'video-playy',
    data() {
        return {
            mvData: {}
        }
    },
    computed: {},
    components: {},
    created() { },
    mounted() { },
    methods: {
        ...mapActions(['changeSongState']),
        handler() {
            this.changeSongState()
            this.$router.go(-1)
        }
    },
    props: {
        id: {
            default: 0,
            type: Number
        }
    },
    async beforeMount() {
        var { data } = await getMvUrl(this.id)
        this.mvData = data.data
        this.changeSongState()
    }
}
</script>
<style scoped>
.myVideo {
    width: 100%;
    margin-top: 50px;
}
</style>
